<script setup>
  import { ref, reactive, computed } from 'vue'
  //  导入登录的两种方式的子组件
  //  1. 账号密码登录
  import slAccount from './components/account'
  // 2. 手机号验证码登录
  import slMobile from './components/mobile'

  // 登录类型索引值
  const tabIndex = ref(0)
  // 表单相关数据
  const tabMetas = reactive([{
      title: '账号登录',
      subTitle: '手机号登陆',
    },
    {
      title: '手机号登录',
      subTitle: '账号登录',
    },
  ])

  // 当前登录信息
  const tabMeta = computed(() => {
    return tabMetas[tabIndex.value]
  })

  // 切换登录类型
  function changeLoginType() {
    tabIndex.value = Math.abs(tabIndex.value - 1)
  }
</script>

<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{ tabMeta.title }}</view>
      <view class="type">
        <!-- 修改登录方式 -->
        <text @click="changeLoginType">{{ tabMeta.subTitle }}</text>
        <text class="iconfont icon-caret"></text>
      </view>
    </view>
    <!-- 1. 默认显示账号密码登录组件 -->
    <sl-account v-if="tabIndex === 0"></sl-account>
    <!-- 2. 手机号验证码登录 -->
    <sl-mobile v-else></sl-mobile>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';

  //  如果覆盖 uni-ui 组件样式不生效，在样式前边加=》::v-deep
  ::v-deep .uni-easyinput__content {
    border: 0;
  }
</style>